<template>
    <div>
        <!-- 导航部分开始 -->
        <el-breadcrumb separator="/">
            <!-- separator="/" 表示路径分隔符为"/" -->
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <!-- 点击首页可以回到路径为'/'的页面下 -->
            <el-breadcrumb-item>排班管理</el-breadcrumb-item>
            <el-breadcrumb-item>排班计划</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 导航部分结束 -->

        <!--  搜索栏开始 -->
        <el-form style="margin-top: 15px;" :inline="true" :model="queryCalPlan" class="demo-form-inline">
            <el-form-item label="班组类型">
                <el-select v-model="queryCalPlan.calendarType" placeholder="请选择班组类型">
                    <el-option label="注塑" value="注塑" />
                    <el-option label="机加工" value="机加工" />
                    <el-option label="组装" value="组装" />
                    <el-option label="仓库" value="仓库" />
                    <el-option label="后整理" value="后整理" />
                </el-select>
            </el-form-item>
            <el-form-item label="计划编号">
                <el-input v-model="queryCalPlan.planCode" placeholder="请输入计划编号" clearable />
            </el-form-item>
            <el-form-item label="计划名称">
                <el-input v-model="queryCalPlan.planName" placeholder="请输入计划名称" clearable />
            </el-form-item>

            <el-form-item label="开始日期">
                <el-date-picker v-model="startDate" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    placeholder="请选择开始日期" />
            </el-form-item>
            <el-form-item label="结束日期">
                <el-date-picker v-model="endDate" type="datetime" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
                    placeholder="请选择结束日期" />
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="sortCalPlans"><el-icon>
                        <Search />
                    </el-icon>搜索</el-button>
                <el-button @click="clearCalPlan"><el-icon>
                        <Refresh />
                    </el-icon>重置</el-button>
            </el-form-item>
        </el-form>
        <!--  搜索栏结束 -->

        <!-- 工具栏开始 -->
        <div class="flex">
            <el-button @click="this.addCalPlanDialogVisible = true" type="primary" plain>
                <el-icon>
                    <Plus />
                </el-icon>
                新增
            </el-button>
            <el-button @click="deleteCalPlans" type="danger" plain>
                <el-icon>
                    <Delete />
                </el-icon>
                删除
            </el-button>
            <el-button type="warning" @click="exportCalPlanTeam" plain>
                <el-icon>
                    <Download />
                </el-icon>
                导出
            </el-button>
        </div>
        <!-- 工具栏结束 -->

        <!-- 排班计划表格 开始 -->
        <el-table ref="calPlanTable" :data="calPlans" max-height="800px" stripe="true" border="true"
            style="width: 90%;margin-top: 10px;">
            <el-table-column align="center" type="selection" width="55" />
            <el-table-column align="center" label="计划ID" property="planId" />
            <el-table-column align="center" label="计划编号" property="planCode">
                <template #default="scope">
                    <el-link type="primary" @click="show(scope.row)">
                        {{ scope.row.planCode }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="计划名称" property="planName" />
            <el-table-column align="center" label="班组类型" property="calendarType">
                <template #default="scope">
                    <el-link>{{ scope.row.calendarType }}</el-link>
                </template>
            </el-table-column>
            <el-table-column align="center" label="开始日期" property="startDate" />
            <el-table-column align="center" label="结束日期" property="endDate" />
            <el-table-column align="center" label="轮班方式" property="shiftType" />
            <el-table-column align="center" label="倒班方式" property="shiftMethod" />
            <el-table-column align="center" label="单据状态" property="calPlanStatus" />
            <el-table-column width="150" align="center" label="操作">
                <template #default="scope">
                    <el-button size="small" @click="handleEdit(scope.row)">修改</el-button>
                    <el-popconfirm confirm-button-text="是" cancel-button-text="点错了" @confirm="handleDelete(scope.row)"
                        title="您是否要删除这行数据">
                        <template #reference>
                            <el-button size="small" type="danger">删除</el-button>
                        </template>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <!-- 排班计划表格 结束 -->

        <!-- 分页栏开始 -->
        <el-pagination style="margin-top: 15px;" :page-size="calPlanLimit" :pager-count="calPlanCurrPage"
            @current-change="changePage" background layout="prev, pager, next" :total="calPlanTotal" />
        <!-- 分页栏结束 -->


        <!-- 添加排班计划弹窗窗体开始 -->
        <el-dialog v-model="addCalPlanDialogVisible" title="添加排班计划" width="600" align-center>
            <!-- 添加排班计划的表单 -->
            <el-form label-width="100px" :model="newCalPlan" style="max-width: 460px">

                <el-form-item label="计划编号">
                    <el-input v-model="newCalPlan.planCode" placeholder="请输入计划编号" />
                </el-form-item>

                <el-form-item label="计划名称">
                    <el-input v-model="newCalPlan.planName" placeholder="请输入计划名称" clearable />
                </el-form-item>

                <el-form-item label="开始日期">
                    <el-date-picker v-model="newCalPlan.startDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择开始日期" />
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="newCalPlan.endDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择结束日期" />
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="newCalPlan.calendarType" placeholder="请选择班组类型">
                        <el-option label="注塑" value="注塑" />
                        <el-option label="机加工" value="机加工" />
                        <el-option label="组装" value="组装" />
                        <el-option label="仓库" value="仓库" />
                        <el-option label="后整理" value="后整理" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="倒班方式">
                    <el-radio-group v-model="newCalPlan.shiftType">
                        <el-radio label="白班">白班</el-radio>
                        <el-radio label="两班倒">两班倒</el-radio>
                        <el-radio label="三班倒">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="newCalPlan.shiftMethod" placeholder="请选择倒班方式">
                        <el-option label="按天" value="按天" />
                        <el-option label="按周" value="按周" />
                        <el-option label="按月" value="按月" />
                        <el-option label="按季度" value="按季度" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="newCalPlan.remark" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelAddCalPlan">取消</el-button>
                    <el-button type="primary" @click="doAddCalPlan">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 添加排班计划弹窗窗体结束 -->



        <!-- 编辑排班计划弹窗窗体开始 -->
        <el-dialog v-model="editCalPlanDialogVisible" title="修改排班计划" width="820" align-center>

            <!-- 1.编辑排班计划的表单开始 -->
            <el-form label-width="100px" :model="editCalPlan" style="max-width: 460px">

                <el-form-item label="计划编号">
                    <el-input v-model="editCalPlan.planCode" placeholder="请输入计划编号" />
                </el-form-item>

                <el-form-item label="计划名称">
                    <el-input v-model="editCalPlan.planName" placeholder="请输入计划名称" clearable />
                </el-form-item>

                <el-form-item label="开始日期">
                    <el-date-picker v-model="editCalPlan.startDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择开始日期" />
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="editCalPlan.endDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择结束日期" />
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="editCalPlan.calendarType" placeholder="请选择班组类型">
                        <el-option label="注塑" value="注塑" />
                        <el-option label="机加工" value="机加工" />
                        <el-option label="组装" value="组装" />
                        <el-option label="仓库" value="仓库" />
                        <el-option label="后整理" value="后整理" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="倒班方式">
                    <el-radio-group v-model="editCalPlan.shiftType">
                        <el-radio label="白班">白班</el-radio>
                        <el-radio label="两班倒">两班倒</el-radio>
                        <el-radio label="三班倒">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="editCalPlan.shiftMethod" placeholder="请选择倒班方式">
                        <el-option label="按天" value="按天" />
                        <el-option label="按周" value="按周" />
                        <el-option label="按月" value="按月" />
                        <el-option label="按季度" value="按季度" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="editCalPlan.remark" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <!-- 1.编辑排班计划的表单结束 -->

            <!-- 2.班次班组标签页开始 -->
            <el-tabs type="border-card">
                <!-- 2.1 班次开始 -->
                <el-tab-pane label="班次">
                    <!-- 班次工具栏开始 -->
                    <div class="flex">
                        <el-button @click="this.addCalShiftDialogVisible = true" type="primary" plain>
                            <el-icon>
                                <Plus />
                            </el-icon>
                            新增
                        </el-button>
                        <el-button type="success" @click="handlerEditCalShifts" plain>
                            <el-icon>
                                <EditPen />
                            </el-icon>
                            修改
                        </el-button>
                        <el-button @click="deleteCalShifts" type="danger" plain>
                            <el-icon>
                                <Delete />
                            </el-icon>
                            删除
                        </el-button>
                    </div>
                    <!-- 班次工具栏结束 -->

                    <!-- 班次表格 开始 -->
                    <el-table ref="calShiftTable" :data="calShifts" max-height="820px" stripe="true" border="true"
                        style="width: 90%;margin-top: 10px;">
                        <el-table-column align="center" type="selection" width="55" />
                        <el-table-column align="center" label="班次ID" property="shiftId" />
                        <el-table-column align="center" label="序号" property="orderNum" />
                        <el-table-column align="center" label="班次名称" property="shiftName" />
                        <el-table-column align="center" label="开始时间" property="startTime" />
                        <el-table-column align="center" label="结束时间" property="endTime" />
                        <el-table-column align="center" label="备注" property="remark" />
                        <el-table-column width="150" align="center" label="操作">
                            <template #default="scope">
                                <el-button size="small" @click="handleEditCalShift(scope.row)">修改</el-button>
                                <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                    @confirm="handleDeleteCalShift(scope.row)" title="您是否要删除这行数据">
                                    <template #reference>
                                        <el-button size="small" type="danger">删除</el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </el-table-column>
                    </el-table>
                    <!-- 班次表格 结束 -->

                    <!-- 分页栏开始 -->
                    <el-pagination style="margin-top: 15px;" :page-size="calShiftLimit" :pager-count="calShiftCurrPage"
                        @current-change="calShiftChangePage" background layout="prev, pager, next" :total="calShiftTotal" />
                    <!-- 分页栏结束 -->

                    <!-- 添加班次弹窗窗体开始 -->
                    <el-dialog v-model="addCalShiftDialogVisible" title="添加班次" width="600" align-center>
                        <!-- 添加班次的表单 -->
                        <el-form label-width="100px" :model="newCalShift" style="max-width: 460px">

                            <el-form-item label="序号">
                                <el-input-number v-model="newCalShift.orderNum" :min="1" :max="100"
                                    @change="handleChange" />
                            </el-form-item>

                            <el-form-item label="班次名称">
                                <el-input v-model="newCalShift.shiftName" placeholder="请输入班次名称" clearable />
                            </el-form-item>

                            <el-form-item label="开始时间">
                                <!-- 注意时间格式 H 0-23 , HH 00-23 , h 1-12 , hh 01-12-->
                                <el-time-picker v-model="newCalShift.startTime" format="HH:mm" value-format="HH:mm"
                                    placeholder="请选择开始时间" />
                            </el-form-item>
                            <el-form-item label="结束时间">
                                <el-time-picker v-model="newCalShift.endTime" format="HH:mm" value-format="HH:mm"
                                    placeholder="请选择结束时间" />
                            </el-form-item>
                        </el-form>

                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="cancelAddCalShift">取消</el-button>
                                <el-button type="primary" @click="doAddCalShift">确定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <!-- 添加班次弹窗窗体结束 -->

                    <!-- 编辑班次弹窗窗体开始 -->
                    <el-dialog v-model="editCalShiftDialogVisible" title="修改计划班次" width="800" align-center>

                        <!-- 编辑班次的表单开始 -->
                        <el-form label-width="100px" :model="editCalShift" style="max-width: 460px">
                            <el-form-item label="序号">
                                <el-input-number v-model="editCalShift.orderNum" :min="1" :max="100"
                                    @change="handleChange" />
                            </el-form-item>

                            <el-form-item label="班次名称">
                                <el-input v-model="editCalShift.shiftName" clearable />
                            </el-form-item>

                            <el-form-item label="开始时间">
                                <!-- 注意时间格式 H 0-23 , HH 00-23 , h 1-12 , hh 01-12-->
                                <el-time-picker v-model="editCalShift.startTime" format="HH:mm" value-format="HH:mm" />
                            </el-form-item>
                            <el-form-item label="结束时间">
                                <el-time-picker v-model="editCalShift.endTime" format="HH:mm" value-format="HH:mm" />
                            </el-form-item>
                        </el-form>
                        <!-- 编辑班次的表单结束 -->

                        <template #footer>
                            <span class="dialog-footer">
                                <el-button @click="cancelEditCalShift">取消</el-button>
                                <el-button type="primary" @click="doCalShiftEdit">确定</el-button>
                            </span>
                        </template>
                    </el-dialog>
                    <!-- 编辑班次的弹窗窗体结束 -->


                </el-tab-pane>
                <!-- 2.1 班次结束 -->

                <!-- 2.2 班组开始 -->
                <el-tab-pane label="班组">
                    <div class="box1">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>班组</span>
                                    <el-button class="button" type="primary" text @click="addCalPlanTeam">添加</el-button>
                                </div>
                            </template>

                            <!-- 计划班组表格展示 开始 -->
                            <el-table ref="calPlanTeamTable" class="planTeamTable" :data="calPlanTeams" max-height="320px"
                                @selection-change="handleSelectionChange" style="width: 100%;">
                                <el-table-column type="selection" width="40" align="center" />
                                <el-table-column align="center" width="110" label="计划班组ID" property="recordId" />
                                <el-table-column align="center" width="110" label="班组ID" property="teamId" />
                                <el-table-column align="center" width="110" label="班组编号" property="teamCode" />
                                <el-table-column align="center" width="110" label="班组名称" property="teamName" />
                                <el-table-column width="110" align="center" label="操作">
                                    <template #default="scope">
                                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                            @confirm="handleDeleteCalPlanTeam(scope.row)" title="您是否要删除这行数据">
                                            <template #reference>
                                                <el-button type="primary" size="small" text><el-icon>
                                                        <Delete />
                                                    </el-icon>删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 计划班组表格展示 结束 -->

                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calPlanTeamLimit"
                                :pager-count="calPlanTeamCurrPage" @current-change="calPlanTeamsChangePage" background
                                layout="prev, pager, next" :total="calPlanTeamTotal" />
                            <!-- 分页栏结束 -->

                        </el-card>

                        <!-- 添加计划班组弹窗开始 -->
                        <el-dialog v-model="addCalPlanTeamDialogVisible" title="班组选择" width="1000" align-center>
                            <!--  搜索栏开始 -->
                            <el-form style="margin-top: 15px;" :inline="true" :model="queryCalTeam"
                                class="demo-form-inline">
                                <el-form-item label="班组编号">
                                    <el-input v-model="queryCalTeam.teamCode" placeholder="请输入班组编号" clearable />
                                </el-form-item>
                                <el-form-item label="班组名称">
                                    <el-input v-model="queryCalTeam.teamName" placeholder="请输入班组名称" clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="loadCalTeams"><el-icon>
                                            <Search />
                                        </el-icon>搜索</el-button>
                                    <el-button @click="clearCalTeam"><el-icon>
                                            <Refresh />
                                        </el-icon>重置</el-button>
                                </el-form-item>
                            </el-form>
                            <!--  搜索栏结束 -->

                            <!-- 班组表格 开始 -->
                            <el-table ref="calTeamTable" :data="calTeams" max-height="800px" stripe="true" border="true"
                                style="width: 90%;margin-top: 10px;">
                                <el-table-column align="center" type="selection" width="55" />
                                <el-table-column align="center" label="班组ID" property="teamId" />
                                <el-table-column align="center" label="班组编号" property="teamCode" />
                                <el-table-column align="center" label="班组名称" property="teamName" />
                                <el-table-column align="center" label="备注" property="remark" />
                            </el-table>
                            <!-- 班组表格 结束 -->
                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calTeamLimit"
                                :pager-count="calTeamCurrPage" @current-change="changePage" background
                                layout="prev, pager, next" :total="calTeamTotal" />
                            <!-- 分页栏结束 -->

                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="cancelAddCalTeam">取消</el-button>
                                    <el-button type="primary" @click="doAddCalPlanTeam">确定</el-button>
                                </span>
                            </template>

                        </el-dialog>
                        <!-- 添加计划班组弹窗结束 -->



                    </div>

                    <div class="box2">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>成员</span>
                                </div>
                            </template>

                            <!-- 班组表格 开始 -->
                            <el-table ref="calTeamMemberTable" :data="calTeamMembers" max-height="320px"
                                style="width: 100%;margin-top: 2px;">
                                <el-table-column align="center" label="用户名" property="userName" />
                                <el-table-column align="center" label="用户昵称" property="nickName" />
                                <el-table-column align="center" label="电话" property="tel" />
                            </el-table>
                            <!-- 班组计划表格 结束 -->

                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calTeamMemberLimit"
                                :pager-count="calTeamMemberCurrPage" @current-change="calTeamMemberChangePage" background
                                layout="prev, pager, next" :total="calTeamMemberTotal" />
                            <!-- 分页栏结束 -->
                        </el-card>
                    </div>

                </el-tab-pane>
                <!-- 2.2 班组结束 -->
            </el-tabs>
            <!-- 2.班次班组标签页结束 -->

            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="cancelEditCalPlan">取消</el-button>
                    <el-button type="primary" @click="doCalPlanEdit">确定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 编辑排班计划的弹窗窗体结束 -->


        <!-- 查看排班计划详情弹窗窗体开始 -->
        <el-dialog v-model="showCalPlanDialogVisible" title="查看排班计划" width="820" align-center>

            <!-- 1.编辑排班计划的表单开始 -->
            <el-form label-width="100px" :model="editCalPlan" style="max-width: 460px">

                <el-form-item label="计划编号">
                    <el-input v-model="editCalPlan.planCode" placeholder="请输入计划编号" />
                </el-form-item>

                <el-form-item label="计划名称">
                    <el-input v-model="editCalPlan.planName" placeholder="请输入计划名称" clearable />
                </el-form-item>

                <el-form-item label="开始日期">
                    <el-date-picker v-model="editCalPlan.startDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择开始日期" />
                </el-form-item>
                <el-form-item label="结束日期">
                    <el-date-picker v-model="editCalPlan.endDate" type="datetime" format="YYYY-MM-DD"
                        value-format="YYYY-MM-DD" placeholder="请选择结束日期" />
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="editCalPlan.calendarType" placeholder="请选择班组类型">
                        <el-option label="注塑" value="注塑" />
                        <el-option label="机加工" value="机加工" />
                        <el-option label="组装" value="组装" />
                        <el-option label="仓库" value="仓库" />
                        <el-option label="后整理" value="后整理" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="倒班方式">
                    <el-radio-group v-model="editCalPlan.shiftType">
                        <el-radio label="白班">白班</el-radio>
                        <el-radio label="两班倒">两班倒</el-radio>
                        <el-radio label="三班倒">三班倒</el-radio>
                    </el-radio-group>
                </el-form-item>

                <el-form-item label="班组类型">
                    <el-select v-model="editCalPlan.shiftMethod" placeholder="请选择倒班方式">
                        <el-option label="按天" value="按天" />
                        <el-option label="按周" value="按周" />
                        <el-option label="按月" value="按月" />
                        <el-option label="按季度" value="按季度" />
                        <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                </el-form-item>

                <el-form-item label="备注">
                    <el-input v-model="editCalPlan.remark" :rows="2" type="textarea" placeholder="请输入内容" />
                </el-form-item>
            </el-form>
            <!-- 1.编辑排班计划的表单结束 -->

            <!-- 2.班次班组标签页开始 -->
            <el-tabs type="border-card">
                <!-- 2.1 班次开始 -->
                <el-tab-pane label="班次">
                
                    <!-- 班次表格 开始 -->
                    <el-table ref="calShiftTable" :data="calShifts" max-height="820px" stripe="true" border="true"
                        style="width: 90%;margin-top: 10px;">
                        <el-table-column align="center" type="selection" width="55" />
                        <el-table-column align="center" label="班次ID" property="shiftId" />
                        <el-table-column align="center" label="序号" property="orderNum" />
                        <el-table-column align="center" label="班次名称" property="shiftName" />
                        <el-table-column align="center" label="开始时间" property="startTime" />
                        <el-table-column align="center" label="结束时间" property="endTime" />
                        <el-table-column align="center" label="备注" property="remark" />
                    </el-table>
                    <!-- 班次表格 结束 -->

                    <!-- 分页栏开始 -->
                    <el-pagination style="margin-top: 15px;" :page-size="calShiftLimit" :pager-count="calShiftCurrPage"
                        @current-change="calShiftChangePage" background layout="prev, pager, next" :total="calShiftTotal" />
                    <!-- 分页栏结束 -->

                </el-tab-pane>
                <!-- 2.1 班次结束 -->

                <!-- 2.2 班组开始 -->
                <el-tab-pane label="班组">
                    <div class="box1">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>班组</span>
                                </div>
                            </template>

                            <!-- 计划班组表格展示 开始 -->
                            <el-table ref="calPlanTeamTable" class="planTeamTable" :data="calPlanTeams" max-height="320px"
                                @selection-change="handleSelectionChange" style="width: 100%;">
                                <el-table-column type="selection" width="40" align="center" />
                                <el-table-column align="center" width="110" label="计划班组ID" property="recordId" />
                                <el-table-column align="center" width="110" label="班组ID" property="teamId" />
                                <el-table-column align="center" width="110" label="班组编号" property="teamCode" />
                                <el-table-column align="center" width="110" label="班组名称" property="teamName" />
                                <el-table-column width="110" align="center" label="操作">
                                    <template #default="scope">
                                        <el-popconfirm confirm-button-text="是" cancel-button-text="点错了"
                                            @confirm="handleDeleteCalPlanTeam(scope.row)" title="您是否要删除这行数据">
                                            <template #reference>
                                                <el-button type="primary" size="small" text><el-icon>
                                                        <Delete />
                                                    </el-icon>删除</el-button>
                                            </template>
                                        </el-popconfirm>
                                    </template>
                                </el-table-column>
                            </el-table>
                            <!-- 计划班组表格展示 结束 -->

                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calPlanTeamLimit"
                                :pager-count="calPlanTeamCurrPage" @current-change="calPlanTeamsChangePage" background
                                layout="prev, pager, next" :total="calPlanTeamTotal" />
                            <!-- 分页栏结束 -->

                        </el-card>

                        <!-- 添加计划班组弹窗开始 -->
                        <el-dialog v-model="addCalPlanTeamDialogVisible" title="班组选择" width="1000" align-center>
                            <!--  搜索栏开始 -->
                            <el-form style="margin-top: 15px;" :inline="true" :model="queryCalTeam"
                                class="demo-form-inline">
                                <el-form-item label="班组编号">
                                    <el-input v-model="queryCalTeam.teamCode" placeholder="请输入班组编号" clearable />
                                </el-form-item>
                                <el-form-item label="班组名称">
                                    <el-input v-model="queryCalTeam.teamName" placeholder="请输入班组名称" clearable />
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="loadCalTeams"><el-icon>
                                            <Search />
                                        </el-icon>搜索</el-button>
                                    <el-button @click="clearCalTeam"><el-icon>
                                            <Refresh />
                                        </el-icon>重置</el-button>
                                </el-form-item>
                            </el-form>
                            <!--  搜索栏结束 -->

                            <!-- 班组表格 开始 -->
                            <el-table ref="calTeamTable" :data="calTeams" max-height="800px" stripe="true" border="true"
                                style="width: 90%;margin-top: 10px;">
                                <el-table-column align="center" type="selection" width="55" />
                                <el-table-column align="center" label="班组ID" property="teamId" />
                                <el-table-column align="center" label="班组编号" property="teamCode" />
                                <el-table-column align="center" label="班组名称" property="teamName" />
                                <el-table-column align="center" label="备注" property="remark" />
                            </el-table>
                            <!-- 班组表格 结束 -->
                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calTeamLimit"
                                :pager-count="calTeamCurrPage" @current-change="changePage" background
                                layout="prev, pager, next" :total="calTeamTotal" />
                            <!-- 分页栏结束 -->

                            <template #footer>
                                <span class="dialog-footer">
                                    <el-button @click="cancelAddCalTeam">取消</el-button>
                                    <el-button type="primary" @click="doAddCalPlanTeam">确定</el-button>
                                </span>
                            </template>

                        </el-dialog>
                        <!-- 添加计划班组弹窗结束 -->



                    </div>

                    <div class="box2">
                        <el-card class="box-card">
                            <template #header>
                                <div class="card-header">
                                    <span>成员</span>
                                </div>
                            </template>

                            <!-- 班组表格 开始 -->
                            <el-table ref="calTeamMemberTable" :data="calTeamMembers" max-height="320px"
                                style="width: 100%;margin-top: 2px;">
                                <el-table-column align="center" label="用户名" property="userName" />
                                <el-table-column align="center" label="用户昵称" property="nickName" />
                                <el-table-column align="center" label="电话" property="tel" />
                            </el-table>
                            <!-- 班组计划表格 结束 -->

                            <!-- 分页栏开始 -->
                            <el-pagination style="margin-top: 15px;" :page-size="calTeamMemberLimit"
                                :pager-count="calTeamMemberCurrPage" @current-change="calTeamMemberChangePage" background
                                layout="prev, pager, next" :total="calTeamMemberTotal" />
                            <!-- 分页栏结束 -->
                        </el-card>
                    </div>

                </el-tab-pane>
                <!-- 2.2 班组结束 -->
            </el-tabs>
            <!-- 2.班次班组标签页结束 -->

            <template #footer>
                <span class="dialog-footer">
                    <el-button type="primary" @click="cancelEditCalPlan">返回</el-button>
                    <el-button @click="cancelEditCalPlan">取消</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 查看排班计划详情弹窗窗体结束 -->
    </div>
</template>

<script>
import calPlanRequest from '../../../api/cal-plan-api.js';
import calShiftRequest from '../../../api/cal-shift-api.js';
import calPlanTeamRequest from '../../../api/cal-plan-team-api.js';
import calTeamRequest from '../../../api/cal-team-api.js';
import calTeamMemberRequest from '../../../api/cal-team-member-api.js';
import { ref } from 'vue';
export default {
    data() {
        return {
            // 排班计划列表展示
            queryCalPlan: {},
            calPlans: [],
            calPlanCurrPage: 1, // 字典分页的当前页码
            calPlanLimit: 10, // 字典分页的每页大小
            calPlanTotal: 0, // 字典列表的总条数
            calPlanMaxPage: 1,// 字典列表的最大页码
            startDate: ref(''),
            endDate: ref(''),


            //添加班组相关属性
            addCalPlanDialogVisible: false,
            newCalPlan: {
                planCode: undefined
            },
            autoTeamCode: false,


            //编辑排班计划所需要的属性
            editCalPlanDialogVisible: false,
            editCalPlan: {},


            //编辑排班计划中的班次班组
            //1.计划班次
            //1.1班组列表展示相关属性
            queryCalShift: {},
            calShifts: [],
            calShiftCurrPage: 1, // 字典分页的当前页码
            calShiftLimit: 10, // 字典分页的每页大小
            calShiftTotal: 0, // 字典列表的总条数
            calShiftMaxPage: 1,// 字典列表的最大页码
            planId: 0,
            currentRow: ref(),
            checkedGh: [],

            //1.2添加班次相关属性
            addCalShiftDialogVisible: false,
            newCalShift: {
                orderNum: ref(1),
                startTime: ref(),
                endTime: ref(),
            },
            shiftType: null,

            //1.3编辑班次所需要的属性
            editCalShiftDialogVisible: false,
            editCalShift: {},


            //2.计划班组
            //2.1计划班组展示相关属性
            queryCalPlanTeam: {},
            calPlanTeams: [],
            calPlanTeamCurrPage: 1, // 字典分页的当前页码
            calPlanTeamLimit: 10, // 字典分页的每页大小
            calPlanTeamTotal: 0, // 字典列表的总条数
            calPlanTeamMaxPage: 1,// 字典列表的最大页码

            //2.2添加计划班组,班组弹窗展示
            addCalPlanTeamDialogVisible: false,
            queryCalTeam: {},
            calTeams: [],
            calTeamCurrPage: 1, // 字典分页的当前页码
            calTeamLimit: 10, // 字典分页的每页大小
            calTeamTotal: 0, // 字典列表的总条数
            calTeamMaxPage: 1,// 字典列表的最大页码

            //2.3班组成员展示
            queryCalTeamMember: {},
            calTeamMembers: [],
            calTeamMemberChangePage: 1,
            calTeamMemberLimit: 10,
            calTeamMemberTotal: 0,
            calTeamMemberMaxPage: 1,

            //查看排班计划详情
            showCalPlanDialogVisible: false,
        };
    },
    methods: {
        //导出排班计划
        exportCalPlanTeam(){
            // 获取表格对象
            let table = this.$refs.calPlanTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            } else {
                this.$message({
                    type: "error",
                    message: "下载文件出现错误,请联系管理员!"
                });
            }
        },

        //查看计划班组详情
        show(row){
            //通过id加载要编辑的班组信息
            calPlanRequest.get(row.planId, res => {
                //将查询的排班计划信息设置到editCalPlan中
                this.editCalPlan = res.data;
                //显示弹窗
                this.showCalPlanDialogVisible = true;
            });
            // 将当前要编辑的班组的id存储起来
            this.planId = row.planId;
            this.shiftType = row.shiftType;
            // 在编辑班组信息的同时加载班组成员信息
            this.loadCalPlans();
            this.loadCalShifts();
            this.loadCalPlanTeams();
        },



        /********************************************************************** */

        // 班组成员展示
        /**
         * 1.获取需要展示成员的班组Id
         */
        handleSelectionChange(selection) {
            this.checkedGh = selection[0].teamId;
            if (selection.length > 1) {
                this.$refs.calPlanTeamTable.clearSelection();
                this.$refs.calPlanTeamTable.toggleRowSelection(selection.pop());
            };
            console.log("*****this.checkedGh=" + this.checkedGh);
            this.loadCalTeamMembers();
        },
        /**
         * 1.加载班组成员数据
         */
        loadCalTeamMembers() {
            this.queryCalTeamMember.teamId = this.checkedGh;
            calTeamMemberRequest.list(this.calTeamMemberChangePage, this.calTeamMemberLimit, this.queryCalTeamMember, res => {
                // 设置数据
                this.calTeamMembers = res.data.list;
                this.calTeamMemberTotal = res.data.total;
                this.calTeamMemberMaxPage = res.data.pages;
            });
        },
        /**
         * 2.班组成员字典列表的翻页函数
         */
        calTeamMemberChangePage(value) {
            this.calTeamMemberCurrPage = value;
            this.loadCalTeamMembers();
        },


        // 计划班组
        /**
         * 删除计划班组相关事件
         */
        /**
         * 1.删除计划班组文字按钮
         */
        handleDeleteCalPlanTeam(row) {
            calPlanTeamRequest.delete(row.recordId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadCalPlanTeams();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },


        /**
         * 添加计划班组相关事件
         */
        /**
         * 1.计划班组添加按钮
         */
        addCalPlanTeam() {
            this.addCalPlanTeamDialogVisible = true;
            this.loadCalTeams();
        },
        /**
         * 2.确定添加计划班组按钮
         */
        doAddCalPlanTeam() {
            // 获取表格对象
            let table = this.$refs.calTeamTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个数组
            let teamIds = [];
            selectionRows.forEach(calTeam => {
                teamIds.push(calTeam.teamId);
            });
            // 调用API进行添加
            calPlanTeamRequest.adds(teamIds, this.planId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "添加成功"
                    });
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "添加失败"
                    });
                }
                this.loadCalPlanTeams();
            });

            this.loadCalTeams();
            this.addCalPlanTeamDialogVisible = false;
        },
        /**
         * 3.取消添加计划班组按钮
         */
        cancelAddCalTeam() {
            this.addCalPlanTeamDialogVisible = false;
            this.loadCalPlanTeams();
        },



        /**
         * 现有班组列表展示相关事件
         */
        /**
         * 1.加载班组数据
         */
        loadCalTeams() {
            calTeamRequest.list(this.calTeamCurrPage, this.calTeamLimit, this.queryCalTeam, res => {
                // 设置数据
                this.calTeams = res.data.list;
                this.calTeamTotal = res.data.total;
                this.calTeamMaxPage = res.data.pages;
            });
        },
        /**
         * 2.字典列表的翻页函数
         */
        changePage(value) {
            this.calTeamCurrPage = value;
            this.loadCalTeams();
        },
        /**
         * 3.重置搜索
         */
        clearCalTeam() {
            this.queryCalTeam = {};
            this.loadCalTeams();
        },



        /**
         * 班组列表展示相关事件
         */
        /**
         * 1.加载计划班组数据列表
         */
        loadCalPlanTeams() {
            this.queryCalPlanTeam.planId = this.planId;
            console.log("planId=" + this.planId);
            calPlanTeamRequest.list(this.calPlanTeamCurrPage, this.calPlanTeamLimit, this.queryCalPlanTeam, res => {
                // 设置数据
                this.calPlanTeams = res.data.list;
                this.calPlanTeamTotal = res.data.total;
                this.calPlanTeamMaxPage = res.data.pages;
            });
        },
        /**
         * 2.字典列表的翻页函数
         */
        calPlanTeamsChangePage(value) {
            this.calPlanTeamCurrPage = value;
            this.loadCalPlanTeams();
        },



        // 计划班次
        /**
         * 编辑修改班次相关事件
         */
        /**
         * 1.行编辑按钮事件-编辑按钮
         */
        handleEditCalShift(row) {
            //通过id加载要编辑的班组信息
            calShiftRequest.get(row.shiftId, res => {
                //将查询的班次信息设置到editCalShift中
                this.editCalShift = res.data;
                //显示弹窗
                this.editCalShiftDialogVisible = true;
            });
        },
        /**
         * 2.取消行编辑按钮事件
         */
        cancelEditCalShift() {
            //将编辑内容的制空
            this.editCalShift = {};
            //关闭弹窗
            this.editCalShiftDialogVisible = false;
        },
        /**
         * 3.行编辑按钮提交事件
         */
        doCalShiftEdit() {
            //提交editCalShift即可
            calShiftRequest.edit(this.editCalShift, res => {
                //这里的res就是后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                    });
                    //关闭编辑弹窗
                    this.editCalShiftDialogVisible = false;
                    //重新加载班组列表数据
                    this.loadCalShifts();
                    //将editCalTeam制空
                    this.editCalShift = {};

                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },
        /**
         * 4.批量编辑按钮事件
         */
        handlerEditCalShifts() {
            // 获取表格对象
            let table = this.$refs.calShiftTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            } else if (selectionRows.length > 1) {
                this.$message({
                    type: "info",
                    message: "只能修改一个班组信息"
                });
            } else {
                // 获取第一行数据
                let row = selectionRows[0];
                // 调用行编辑事件
                this.handleEditCalShift(row);
            }

        },



        /**
         * 删除班次相关事件
         */
        /**
         * 1.行编辑按钮-删除按钮事件
         */
        handleDeleteCalShift(row) {
            calShiftRequest.delete(row.shiftId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadCalShifts();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 2.工具栏-批量删除按钮事件
         */
        deleteCalShifts() {
            // 获取表格对象
            let table = this.$refs.calShiftTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的数组
            let shiftIds = [];
            selectionRows.forEach(calShift => {
                shiftIds.push(calShift.shiftId);
            });
            // 调用API进行删除
            calShiftRequest.deletes(shiftIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadCalShifts();
            });
        },



        /**
         * 添加班次相关事件
         */
        /**
         * 1.添加班次的提交按钮事件
         */
        doAddCalShift() {
            this.newCalShift.planId = this.planId;
            calShiftRequest.save(this.newCalShift, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddCalShift();
                    // 重新加载数据
                    this.loadCalShifts();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 2.取消添加排班计划的按钮事件
         */
        cancelAddCalShift() {
            // 关闭窗体
            this.addCalShiftDialogVisible = false;
            // 清空newCalShift
            this.newCalShift = {
                orderNum: ref(1),
                startTime: ref(),
                endTime: ref(),
            };
        },


        /**
         * 班次列表展示相关事件
         */
        /**
         * 1.加载排班计划数据列表
         */
        loadCalShifts() {
            this.queryCalShift.planId = this.planId;
            console.log("planId=" + this.planId);
            calShiftRequest.list(this.calShiftCurrPage, this.calShiftLimit, this.queryCalShift, res => {
                // 设置数据
                this.calShifts = res.data.list;
                this.calShiftTotal = res.data.total;
                this.calShiftMaxPage = res.data.pages;
            });
        },
        /**
         * 2.字典列表的翻页函数
         */
        calShiftChangePage(value) {
            this.calShiftCurrPage = value;
            this.loadCalShifts();
        },





        /********************************************************************************** */
        /**
         * 编辑排班计划相关事件
         */
        /**
         * 1.行编辑按钮事件-编辑按钮
         */
        handleEdit(row) {
            //通过id加载要编辑的班组信息
            calPlanRequest.get(row.planId, res => {
                //将查询的排班计划信息设置到editCalPlan中
                this.editCalPlan = res.data;
                //显示弹窗
                this.editCalPlanDialogVisible = true;
            });
            // 将当前要编辑的班组的id存储起来
            this.planId = row.planId;
            this.shiftType = row.shiftType;
            // 在编辑班组信息的同时加载班组成员信息
            this.loadCalPlans();
            this.loadCalShifts();
            this.loadCalPlanTeams();
        },
        /**
         * 2.取消行编辑按钮事件
         */
        cancelEditCalPlan() {
            //将编辑内容的制空
            this.editCalPlan = {};
            //关闭弹窗
            this.editCalPlanDialogVisible = false;
            this.showCalPlanDialogVisible = false;
        },
        /**
         * 3.行编辑按钮提交事件
         */
        doCalPlanEdit() {
            //提交editCalPlan即可
            calPlanRequest.edit(this.editCalPlan, res => {
                //这里的res就是后端返回的perResult对象
                if (res.code == '200') {
                    this.$message({
                        message: '编辑成功',
                        type: 'success',
                    });
                    //关闭编辑弹窗
                    this.editCalPlanDialogVisible = false;
                    //重新加载班组列表数据
                    this.loadCalPlans();
                    //将editCalPlan制空
                    this.editCalPlan = {};

                } else if (res.code == '300') {
                    this.$message({
                        message: '计划编号或计划名称重复',
                        type: 'warning',
                    });

                } else {
                    this.$message({
                        message: '编辑失败',
                        type: 'error',
                    });
                }
            });
        },


        /**
         * 添加排班计划相关事件
         */
        /**
         * 1.添加排班计划的提交按钮事件
         */
        doAddCalPlan() {
            calPlanRequest.save(this.newCalPlan, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "保存成功"
                    });
                    // 关闭窗体
                    this.cancelAddCalPlan();
                    // 重新加载数据
                    this.loadCalPlans();// 加载当前页
                } else if (res.code == 300) {
                    this.$message({
                        type: "warning",
                        message: res.msg
                    });
                } else {
                    this.$message({
                        type: "error",
                        message: "保存失败"
                    });
                }
            });
        },
        /**
         * 2.取消添加排班计划的按钮事件
         */
        cancelAddCalPlan() {
            // 关闭窗体
            this.addCalPlanDialogVisible = false;
            // 清空newCalPlan
            this.newCalPlan = {};
        },



        /**
         * 删除排班计划相关事件
         */
        /**
         * 1.行编辑按钮-删除按钮事件
         */
        handleDelete(row) {
            calPlanRequest.delete(row.planId, res => {
                if (res.code == 200) {
                    this.$message({
                        type: "success",
                        message: "删除成功"
                    });
                    this.loadCalPlans();
                } else {
                    this.$message({
                        type: "error",
                        message: "删除失败"
                    });
                }
            })
        },
        /**
         * 2.工具栏-批量删除按钮事件
         */
        deleteCalPlans() {
            // 获取表格对象
            let table = this.$refs.calPlanTable;
            // 通过API获取被选中的数据 
            let selectionRows = table.getSelectionRows();
            if (selectionRows == undefined || selectionRows.length == 0) {
                this.$message({
                    type: "info",
                    message: "您没有选中任何行"
                });
            }
            // 生成一个要删除的数组
            let planIds = [];
            selectionRows.forEach(calPlan => {
                planIds.push(calPlan.planId);
            });
            // 调用API进行删除
            calPlanRequest.deletes(planIds, res => {
                this.$message({
                    type: "success",
                    message: "成功的删除了" + res.msg + "条数据"
                });
                this.loadCalPlans();
            });
        },



        /**
         * 排班计划列表展示相关事件
         */
        /**
         * 1.加载排班计划数据列表
         */
        loadCalPlans() {
            calPlanRequest.list(this.calPlanCurrPage, this.calPlanLimit, this.queryCalPlan, res => {
                // 设置数据
                this.calPlans = res.data.list;
                this.calPlanTotal = res.data.total;
                this.calPlanMaxPage = res.data.pages;
            });
        },
        /**
         * 2.字典列表的翻页函数
         */
        changePage(value) {
            this.calPlanCurrPage = value;
            this.loadCalPlans();
        },
        /**
         * 3.搜索按钮事件
         */
        sortCalPlans() {
            this.queryCalPlan.startDate = this.startDate;
            this.queryCalPlan.endDate = this.endDate;
            console.log("this.startDate=" + this.startDate);
            console.log("this.queryCalPlan.startDate=" + this.queryCalPlan.startDate);
            this.loadCalPlans();
        },
        /**
         * 4.重置搜索框按钮事件
         */
        clearCalPlan() {
            this.queryCalPlan = {};
            this.loadCalPlans();
            this.startDate = ref(''),
                this.endDate = ref('')
        },
        /**
         * 5.格式化表格中时间的函数,毫秒数转换为年月日
         */
        timeFormatter(row, column, cellValue, index) {
            let date = new Date();
            // 设置时间
            date.setTime(cellValue);
            // 转换时间，并且返回
            return (
                date.getFullYear() +
                "-" +
                (date.getMonth() + 1) +
                "-" +
                date.getDate()
            );
        },

    },
    mounted() {
        this.loadCalPlans();
    }
}
</script>

<style scoped>
.card-header {
    height: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.text {
    font-size: 13px;
}

.item {
    margin-bottom: 18px;
}

.box-card {
    width: 510px;
}

.box1 {
    position: relative;

}

.box2 {
    /* margin-left: 455px;
    position: absolute;
    margin-top: -380px; */
}
</style>